<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="100px" @submit.native.prevent>
      <el-form-item label="立项年度" prop="year">
        <el-date-picker
          v-model="pram.year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="请选择立项年度">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目类别" prop="category">
        <el-select v-model="pram.category" placeholder="请选择项目类别">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="area">
        <el-select v-model="pram.area" placeholder="请选择地区">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="pram.name" maxlength="50" placeholder="请输入项目名称" clearable />
      </el-form-item>
      <el-form-item label="申报单位" prop="application_unit">
        <el-input v-model="pram.application_unit" maxlength="50" placeholder="请输入申报单位" clearable />
      </el-form-item>
      <el-form-item label="项目负责人" prop="principal">
        <el-input v-model="pram.principal" maxlength="50" placeholder="请输入项目负责人" clearable />
      </el-form-item>
      <el-form-item label="推荐单位" prop="reference">
        <el-input v-model="pram.reference" maxlength="50" placeholder="请输入推荐单位" clearable />
      </el-form-item>
      <el-form-item label="金额" prop="amount">
        <el-input v-model="pram.amount" type="number" min="0" max="99999" placeholder="请输入金额" clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="pram.status" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Debounce} from '@/utils/validate'
import {getEditData} from "@/utils/utils";
import {saveProject} from "@/api/project";
export default {
  // name: "edit"
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    category: {
      type: Array
    },
    area: {
      type: Array
    }
  },
  data() {
    return {
      constants:this.$constants,
      pram: {
        year: '',
        category: null,
        area: null,
        name: '',
        application_unit: '',
        principal: '',
        reference: '',
        amount: 0,
        status: 1,
        id: 0,
      },
      categoryList:[],
      areaList:[],
      rules: {
        year: [{ required: true, message: '请选择年度', trigger: ['blur', 'change'] }],
        category: [{ required: true, message: '请选择类别', trigger: ['blur', 'change'] }],
        area: [{ required: true, message: '请选择地区', trigger: ['blur', 'change'] }],
        name: [{ required: true, message: '请输入名称', trigger: ['blur', 'change'] }],
        application_unit: [{ required: true, message: '请输入申报单位', trigger: ['blur', 'change'] }],
        principal: [{ required: true, message: '请输入项目负责人', trigger: ['blur', 'change'] }],
        reference: [{ required: true, message: '请输入推荐单位', trigger: ['blur', 'change'] }],
        amount: [{ required: true, message: '请输入金额', trigger: ['blur', 'change'] }],
      },
    }
  },
  mounted() {
    this.initEditData()
  },
  watch:{
    category:{
      immediate:true,
      handler(v){
        this.categoryList=v;
      }
    },
    area:{
      immediate:true,
      handler(v){
        this.areaList=v;
      }
    },
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //编辑
      this.pram=
      {
        ...getEditData(Object.keys(this.pram), this.editData)
      };
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        saveProject(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        })
      })
    }),
  }
}
</script>

<style scoped>

</style>
